import type { ActionType, ProColumnType } from '@ant-design/pro-components';
import {
  PageContainer,
  ProTable,
} from '@ant-design/pro-components';
import React, { useRef } from 'react';
import type { TableListItem, TableListPagination } from './data';
import { getUserLogPage, } from './service';
import './index.less'
import { Button } from 'antd';
import { LineChartOutlined } from '@ant-design/icons';
import { history } from '@umijs/max';

const TableList: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const columns: ProColumnType<any>[] = [
    {
      title: '序号',
      dataIndex: '#',
      key: '#',
      width: 80,
      hideInSearch: true,
      hideInForm: true,
      valueType: 'indexBorder',
      editable: false,
      fixed: 'left'
    },
    {
      title: '用户标识',
      dataIndex: 'uniqueId',
      width: 150,
      ellipsis: true,
      fixed: 'left'
    },
    {
      title: '设备类型',
      dataIndex: 'deviceType',
      valueType: 'select',
      valueEnum: {
        Android: {text: '安卓手机'},
        iOS: {text: '苹果手机'},
        Windows: {text: 'Windows'},
      },
      width: 100,
    },
    {
      title: '地域',
      dataIndex: 'region',
      width: 100,
    },

    {
      title: '行为类型',
      dataIndex: 'behaviorType',
      valueType: 'select',
      valueEnum: {
        click: {text: '点击'},
        search: {text: '搜索'},
        onLaunch: {text: '启动小程序'},
        onLoad: {text: '打开页面'},
      },
      width: 120,
    },
    {
      title: '搜索值',
      dataIndex: 'searchValue',
      width: 120,
    },
    {
      title: '经度',
      dataIndex: 'longitude',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '纬度',
      dataIndex: 'latitude',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '页面路径',
      dataIndex: 'pagePath',
      width: 200,
      ellipsis: true,
    },
    {
      title: '页面参数',
      dataIndex: 'pageQuery',
      hideInSearch: true,
      width: 200,
      ellipsis: true,
    },
    {
      title: '来源',
      dataIndex: 'referer',
      width: 200,
      ellipsis: true,
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      key: 'gmtCreate',
      hideInSearch: true,
      valueType: 'dateTime',
      hideInForm: true,
      width: 200,
    },
    {
      title: '更新时间',
      dataIndex: 'gmtModified',
      key: 'gmtModified',
      valueType: 'dateTime',
      hideInSearch: true,
      hideInForm: true,
      width: 200,
    },
  ];

  return (
    <PageContainer className='user_log'>
      <ProTable<TableListItem, TableListPagination>
        headerTitle="用户日志数据"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        scroll={{x: 1200}}
        toolbar={{
          actions: [
            <Button key={'primary'} type='primary' icon={<LineChartOutlined />} onClick={() => {
              history.push('/report')
            }}>数据可视化</Button>
          ]
        }}
        request={async ({ current, pageSize, ...other }) => {
          // @ts-ignore
          const res = await getUserLogPage({
            page: current,
            size: pageSize,
            ...other
          })

          return {
            data: res?.data?.current_data,
            total: res?.data?.total_records
          }
        }}
        columns={columns}
      />
    </PageContainer>
  );
};

export default TableList;
